<template>
	<div class="front detailsTable">
		<!-- 车牌号码 -->
		<el-table :data="tableData" border :key="0" ref="multipleTable" style="width: 100%" v-show="row[0]['dataCategoryId'] == 0" @selection-change="selectionChange" @row-contextmenu="rowContextmenu">
	        <el-table-column type="selection" align="center"></el-table-column>
	        <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
	        <el-table-column label="车牌号码" prop="carNumber" align="center"></el-table-column>
	        <el-table-column label="车型" prop="vehicleType" align="center"></el-table-column>
	        <el-table-column label="座位数" prop="seatNumber" align="center"></el-table-column>
	        <el-table-column label="状态" prop="state" align="center">
	            <template slot-scope="scope">
	                <span style="color: green;" v-if="scope.row.state == 1">已启用</span>
	                <span style="color: red;" v-if="scope.row.state == 0">已禁用</span>
	            </template>
	        </el-table-column>
	        <el-table-column label="备注" prop="remarks" align="center"></el-table-column>
	        <el-table-column label="操作" align="center">
	            <template slot-scope="scope">
	                <el-button type="text" size="small" @click="update(scope.row.id)">修改</el-button>
	            </template>
	        </el-table-column>
	    </el-table>
	    <!-- 合同编号 -->
	    <el-table :data="tableData" border :key="1" ref="multipleTable" style="width: 100%" v-show="row[0]['dataCategoryId'] == 1" @selection-change="selectionChange" @row-contextmenu="rowContextmenu">
            <el-table-column type="selection" align="center"></el-table-column>
            <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
            <el-table-column :label="label['givenName']" prop="givenName" align="center">
                <template slot-scope="scope">
                    <span v-for="item in names" :key="item['id']">
                        <i v-if="item['id'] == scope.row.givenName" style="font-style: normal;">{{ item['name'] }}</i>
                    </span>
                </template>
            </el-table-column>
            <el-table-column :label="label['givenNumberOne']" prop="givenNumberOne" align="center"></el-table-column>
            <el-table-column :label="label['givenNumberTwo']" prop="givenNumberTwo" align="center"></el-table-column>
            <el-table-column label="状态" prop="state" align="center">
                <template slot-scope="scope">
                    <span style="color: green;" v-if="scope.row.state == 1">已启用</span>
                    <span style="color: red;" v-if="scope.row.state == 0">已禁用</span>
                </template>
            </el-table-column>
            <el-table-column label="备注" prop="remarks" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="update(scope.row.id)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 货号资料 -->
        <el-table :data="tableData" border :key="2" ref="multipleTable" style="width: 100%" v-show="row[0]['dataCategoryId'] == 2" @selection-change="selectionChange" @row-contextmenu="rowContextmenu">
            <el-table-column type="selection" align="center"></el-table-column>
            <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
            <el-table-column label="客户名称" prop="customerName" align="center"></el-table-column>
            <el-table-column label="公司货号" prop="companyNumber" align="center"></el-table-column>
            <el-table-column label="客户货号" prop="customerNumber" align="center"></el-table-column>
            <el-table-column label="产成品名称" prop="finishProductName" align="center"></el-table-column>
            <el-table-column label="状态" prop="state" align="center">
                <template slot-scope="scope">
                    <span style="color: green;" v-if="scope.row.state == 1">已启用</span>
                    <span style="color: red;" v-if="scope.row.state == 0">已禁用</span>
                </template>
            </el-table-column>
            <el-table-column label="备注" prop="remarks" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="update(scope.row.id)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 普通资料 -->
        <el-table :data="tableData" border :key="3" ref="multipleTable" style="width: 100%" v-show="row[0]['dataCategoryId'] == 3" @selection-change="selectionChange" @row-contextmenu="rowContextmenu">
            <el-table-column type="selection" align="center"></el-table-column>
            <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
            <el-table-column label="名称" prop="detailedName" align="center"></el-table-column>
            <el-table-column label="状态" prop="state" align="center">
                <template slot-scope="scope">
                    <span style="color: green;" v-if="scope.row.state == 1">已启用</span>
                    <span style="color: red;" v-if="scope.row.state == 0">已禁用</span>
                </template>
            </el-table-column>
            <el-table-column label="备注" prop="remarks" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="update(scope.row.id)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 银行资料 -->
        <el-table :data="tableData" border :key="4" ref="multipleTable" style="width: 100%" v-show="row[0]['dataCategoryId'] == 4" @selection-change="selectionChange" @row-contextmenu="rowContextmenu">
            <el-table-column type="selection" align="center"></el-table-column>
            <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
            <el-table-column label="名称" prop="name" align="center"></el-table-column>
            <el-table-column label="开户行" prop="bankName" align="center"></el-table-column>
            <el-table-column label="账号" prop="accountNumber" align="center"></el-table-column>
            <el-table-column label="状态" prop="state" align="center">
                <template slot-scope="scope">
                    <span style="color: green;" v-if="scope.row.state == 1">已启用</span>
                    <span style="color: red;" v-if="scope.row.state == 0">已禁用</span>
                </template>
            </el-table-column>
            <el-table-column label="备注" prop="remarks" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="update(scope.row.id)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 右键菜单组件 -->
        <bj-menu :isShow.sync="menus.isShow" :disabled="menus.disabled" @handlerClick="handlerClick"/>
	</div>
</template>
<script>
export default {
	data() {
		return {
			row: this.$store.state.auxiliaryStore.row,
			tableData: this.$store.state.auxiliaryStore.tableData,
			label: this.$store.state.auxiliaryStore.label,
            names: this.$store.state.auxiliaryStore.names,
            menus: {
				isShow: false,
				row: null,
				disabled: ['打印']
			}
		}
	},
	methods: {
		selectionChange(arr) {
			this.$store.commit('auxiliaryStore/multipleSelection', arr);
		},
        refresh() {
            const loading = this.$loading({
                lock: true,
                text: '数据刷新中...',
                spinner: 'el-icon-loading',
                background: '#fff'
            });
            setTimeout(() => {
                loading.close();
            }, 1000);
        },
        add() {     //新增
            this.$store.commit('auxiliaryStore/updateRowId');           //新增之前先把rowId清空，防止是修改状态
            if(this.row[0]['level'] === 0) {
                this.$util.openLayerIframe({title: '小类-新增', zIndex: 13, width: '500px', height: '360px', url: this.$domain + '/#/basicData/auxiliary/subClassForm'});
            } else if(this.row[0]['level'] === 1) {
                switch(this.row[0]['dataCategoryId']) {
                    case 0:
                        this.$util.openLayerIframe({title: '车牌号码-新增', zIndex: 13, width: '500px', height: '410px', url: this.$domain + '/#/basicData/auxiliary/carNumberForm'});
                        break;
                    case 1:
                        this.$util.openLayerIframe({title: '合同编号-新增', zIndex: 13, width: '500px', height: '420px', url: this.$domain + '/#/basicData/auxiliary/contractNumberForm'});
                        break;
                    case 2:
                        this.$util.openLayerIframe({title: '货号资料-新增', zIndex: 13, width: '500px', height: '380px', url: this.$domain + '/#/basicData/auxiliary/goodsInfoForm'});
                        break;
                    case 3:
                        this.$util.openLayerIframe({title: '普通资料-新增', zIndex: 13, width: '500px', height: '300px', url: this.$domain + '/#/basicData/auxiliary/ordinaryForm'});
                        break;
                    case 4:
                        this.$util.openLayerIframe({title: '银行资料-新增', zIndex: 13, width: '500px', height: '415px', url: this.$domain + '/#/basicData/auxiliary/bankForm'});
                        break;
                    default: break;
                }
            }
        },
        update(id) {
            this.$store.commit('auxiliaryStore/updateRowId', id);
            if(this.row[0]['level'] === 0) {
                this.$util.openLayerIframe({title: '小类-修改', zIndex: 13, width: '500px', height: '310px', url: this.$domain + '/#/basicData/auxiliary/subClassForm'});
            } else if(this.row[0]['level'] === 1) {
                switch(this.row[0]['dataCategoryId']) {
                    case 0:
                        this.$util.openLayerIframe({title: '车牌号码-修改', zIndex: 13, width: '500px', height: '360px', url: this.$domain + '/#/basicData/auxiliary/carNumberForm'});
                        break;
                    case 1:
                        this.$util.openLayerIframe({title: '合同编号-修改', zIndex: 13, width: '500px', height: '365px', url: this.$domain + '/#/basicData/auxiliary/contractNumberForm'});
                        break;
                    case 2:
                        this.$util.openLayerIframe({title: '货号资料-修改', zIndex: 13, width: '500px', height: '380px', url: this.$domain + '/#/basicData/auxiliary/goodsInfoForm'});
                        break;
                    case 3:
                        this.$util.openLayerIframe({title: '普通资料-修改', zIndex: 13, width: '500px', height: '250px', url: this.$domain + '/#/basicData/auxiliary/ordinaryForm'});
                        break;
                    case 4:
                        this.$util.openLayerIframe({title: '银行资料-修改', zIndex: 13, width: '500px', height: '370px', url: this.$domain + '/#/basicData/auxiliary/bankForm'});
                        break;
                    default: break;
                }
            }
        },
        del(id) {         //右键删除小类明细数据
            if(this.row[0]['level'] === 0) {
                this.$confirm('确定删除该小类', '删除提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(res => {
                    this.$http.delete('auxiliary/delete', {data: [id]}).then(res => {
                        if(res.data.code == 20001) {
                            this.$message({message: '删除小类成功', type: 'success', duration: 1500});
                            setTimeout(() => {
                                this.$store.dispatch('auxiliaryStore/getTreeData');
                            }, 1500);
                        }
                    });
                }).catch(() => {
                    this.$message({message: '已取消删除', type: 'info', duration: 1500});
                });
            } else if(this.row[0]['level'] === 1) {
                this.$confirm('确定删除该条明细数据', '删除提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(res => {
                    let $url = null;
                    switch(this.row[0]['dataCategoryId']) {
                        case 0:
                            $url = 'auxiliaryInfoAllCategory/deleteCarNumber';
                            break;
                        case 1:
                            $url = 'auxiliaryInfoAllCategory/deleteContractNumber';
                            break;
                        case 2:
                            $url = 'auxiliaryInfoAllCategory/deleteGoodsInfo';
                            break;
                        case 3:
                            $url = 'auxiliaryInfoAllCategory/deleteOrdinary';
                            break;
                        case 4:
                            $url = 'auxiliaryInfoAllCategory/deleteBank';
                            break;
                        default: break;
                    }
                    this.$http.delete($url, {data: [id]}).then(res => {   //这里有右键单条删除和普通多条删除
                        if(res.data.code == 20001) {
                            this.$message({message: '删除成功', type: 'success', duration: 1500});
                            setTimeout(() => {
                                this.$store.dispatch('auxiliaryStore/getSubClassTableData');
                            }, 1000);
                        } else {
                            this.$message({message: res.data.msg || '删除失败', type: 'error', duration: 1500});
                        }
                    });
                });
            }
        },
        disabedBtn(status, msg, row) {          //右键禁用、启用小类明细
            if(row['state'] == status) {
                this.$alert(msg + '失败，其中包含已'+ msg +'选项，重新选择！', msg + '提示', {
                    confirmButtonText: '确定'
                });
                return false;
            }
            if(this.row[0]['level'] === 0) {
                this.$http.post('auxiliary/updateState?state=' + status, JSON.stringify([row['id']]), {
                    headers: {'Content-type': 'application/json;charset=UTF-8'}
                }).then(res => {
                    if(res.data.code == 20001) {
                        this.$message({message: msg + '成功', type: 'success', duration: 2000});
                        setTimeout(() => {
                            this.$store.dispatch('auxiliaryStore/getTreeData');
                        }, 1000);
                    } else {
                        this.$message({message: res.data.msg || msg + '失败', type: 'error', duration: 1500});
                    }
                });
            } else if(this.row[0]['level'] === 1) {
                let $url = null;
                switch(this.row[0]['dataCategoryId']) {         //配置各个大类下面的小类禁用、启用api
                    case 0:
                        $url = 'auxiliaryInfoAllCategory/updateCarNumberState?state=' + status;
                        break;
                    case 1:
                        $url = 'auxiliaryInfoAllCategory/updateContractNumberState?state=' + status;
                        break;
                    case 2:
                        $url = 'auxiliaryInfoAllCategory/updateGoodsInfoState?state=' + status;
                        break;
                    case 3:
                        $url = 'auxiliaryInfoAllCategory/updateOrdinaryState?state=' + status;
                        break;
                    case 4:
                        $url = 'auxiliaryInfoAllCategory/updateBankState?state=' + status;
                        break;
                    default: break;
                }
                this.$http.post($url, JSON.stringify([row['id']]), {
                    headers: {'Content-type': 'application/json;charset=UTF-8'}
                }).then(res => {
                    if(res.data.code == 20001) {
                        this.$message({message: msg + '成功', type: 'success', duration: 1500});
                        setTimeout(() => {
                            this.$store.dispatch('auxiliaryStore/getSubClassTableData');           //刷新数据
                        }, 1000);
                    } else {
                        this.$message({message: res.data.msg || msg + '失败', type: 'error', duration: 1500});
                    }
                });
            }
        },
        rowContextmenu(row, event) {
            event.preventDefault();     		//阻止默认事件
			this.menus.isShow = true;			//显示右键菜单
			this.menus.row = row;				//存储当前所在行数据
            let x = event.clientX,
                y = event.clientY,
                pw = $('.tab-front').outerWidth(true),
                ph = $('.tab-front').outerHeight(true),
                cw = $('.bj-menu').outerWidth(true),
                ch = $('.bj-menu').outerHeight(true);
            //处理边界
            if(x <= 0) x = 0;
            if(y <= 0) y = 0;
            if(x >= pw - cw) x = pw - cw - 5;
            if(y >= ph - ch) y = ph - ch - 5;
            $('.bj-menu').css({left: x + 'px', top: y + 'px'});
        },
        handlerClick(index) {		//右键点击菜单选项触发该函数
			switch(index) {
				case 1:
					this.refresh();
					break;
				case 2:
					this.add();
					break;
				case 3:
					this.update(this.menus.row.id);
					break;
				case 4:
					this.del(this.menus.row.id);
					break;
				case 5:
					this.disabedBtn(0, '禁用', this.menus.row);
					break;
				case 6:
					this.disabedBtn(1, '启用', this.menus.row);
					break;
				case 8:
					this.tableMove(this.tableData, this.menus.row, index);
					break;
				case 9:
					this.tableMove(this.tableData, this.menus.row, index);
					break;
				case 10:
					this.tableMove(this.tableData, this.menus.row, index);
					break;
				case 11:
					this.tableMove(this.tableData, this.menus.row, index);
					break;
				default: break;
			}
		},
		tableMove(tableData, row, index) {			//上移、下移、置于顶层、置于底层
			switch(index) {
				case 8:
					if(tableData[0]['id'] !== row['id']) {
						let pos = tableData.indexOf(row);		//拿到当前row在数组中所在的位置
						tableData.splice(pos - 1, 0, tableData.splice(pos, 1)[0]);
					} else {
						//数组的第一位，不能上移
						this.$message({message: '已经是第一条了，不可上移', type: 'warning', duration: 1500});
					}
					break;
				case 9:
					if(tableData[tableData.length - 1]['id'] !== row['id']) {
						let pos = tableData.indexOf(row);
						tableData.splice(pos + 1, 0, tableData.splice(pos, 1)[0]);
					} else {
						//数组最后一位，不能下移
						this.$message({message: '已经是最后一条了，不可下移', type: 'warning', duration: 1500});
					}
					break;
				case 10:
					if(tableData[0]['id'] !== row['id']) {
						tableData.unshift(tableData.splice(tableData.indexOf(row), 1)[0]);		//向数组的开头插入row
					} else {
						//数组的第一位，不能置顶
						this.$message({message: '已经是第一条了，不可置顶', type: 'warning', duration: 1500});
					}
					break;
				case 11:
					if(tableData[tableData.length - 1]['id'] !== row['id']) {
						tableData.push(tableData.splice(tableData.indexOf(row), 1)[0]);
					} else {
						//数组最后一位，不能置底
						this.$message({message: '已经是最后一条了，不可置底', type: 'warning', duration: 1500});
					}
					break;
				default: break;
			}
		}
	}
}
</script>